<template>
	<view class="" @touchmove.stop.prevent="">
		<u-popup overlayOpacity="0.6" style="" :show="true" mode="center" bgColor="transparent">
			<view class="popBox">
				<view class="lightPillar" v-if="!couponShow1">
					<view class="child" v-for="i in 10" :key="i"></view>
				</view>
				<view class="couponBox" v-if="!couponShow1">
					<image src="https://cdn.yic3.cn/lawyer/mp-xhs/contract/couponBg.png" mode=""></image>
					<image @click="closePop" src="https://cdn.yic3.cn/lawyer/mp-xhs/contract/couponBtn.png" mode=""></image>
				</view>
				<view class="aniImg" v-if="couponShow1" :class="{'ball-box-translate':couponShow2}">
					<image :class="{'ball-translate':couponShow2}" src="https://cdn.yic3.cn/lawyer/mp-xhs/contract/coupon.png" mode="widthFix">
					</image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "conponPop",
		data() {
			return {
				couponShow: false,
				couponShow1: false,
				couponShow2: false,
			};
		},
		methods: {
			closePop() {
				this.couponShow1 = true
				setTimeout(() => {
					this.couponShow2 = true
					this.$emit('editOriginPrice')
					setTimeout(() => {
						this.couponShow = false
						uni.setStorageSync('couponTime', new Date().getTime())
						this.$emit('openCoupon')
					}, 1000)
				}, 100)
			},

		}
	}
</script>

<style lang="scss">
	.popBox {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 874.82rpx;
		width: 100vw;

		.couponBox {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 111;
			>image:nth-child(1) {
				width: 702rpx;
				height: 672rpx;
			}

			>image:nth-child(2) {
				width: 434rpx;
				height: 90rpx;
				animation: imgScalc 0.8s linear infinite;
			}

			@keyframes imgScalc {
				0% {
					transform: scale(0.9);
				}
				50% {
					transform: scale(1.1);
				}
				to {
					transform: scale(0.9);
				}
			}
		}

		.lightPillar {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 350rpx;
			height: 350rpx;

			>view {
				left: 0;
				right: 0;
				margin: 0 auto;
				width: 200rpx;
				height: 350rpx;
				background-image: linear-gradient(to top, rgba(255, 255, 127, 0.3), RGBA(255, 255, 127, 0));
				clip-path: polygon(35.67% 0%, 69.67% 0%, 58.33% 100%, 42% 100%);
				position: absolute;
				transform-origin: bottom center;
				animation: rotate 2s linear infinite;
			}

			@for $i from 1 through 10 {
				>view:nth-child(#{$i}) {
					animation-delay: -$i * .2s;
				}

			}
		}

		@keyframes rotate {
			form {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		.aniImg {
			width: 141.31rpx;
			height: 100.02rpx;
			transition: all 1s linear;

			>image {
				width: 141.31rpx;
				height: 100.02rpx;
			}
		}

		.ball-box-translate {
			transform: translateX(calc(70rpx - 50vw));
		}

		.ball-translate {
			transform: translateY(calc(50vh - 190rpx));
			transition: all 1s cubic-bezier(.08, -0.35, .99, .33);
		}
	}
</style>